
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  FlatList,
  TouchableOpacity,
} from 'react-native';
var Dimensions = require('Dimensions');
var {height,width} = Dimensions.get('window');
var youLikeData = require('../../LocalData/HomeGeustYouLike.json');
import BottomCommonCell from './BottomCommonCell';
export default class GuessYouLike extends Component {
  constructor(props){
    super(props);
    this.state = {
      api_url:'http://api.meituan1.com/group/v2/recommend/homepage/city/20?userId=160495643&userid=160495643&__vhost=api.mobile.meituan.com&position=23.134643%2C113.373951&movieBundleVersion=100&utm_term=6.6&limit=40&wifi-mac=64%3A09%3A80%3A10%3A15%3A27&ci=20&__skcy=X6Jxu5SCaijU80yX5ioQuvCDKj4%3D&__skua=5657981d60b5e2d83e9c64b453063ada&__skts=1459731016.350255&wifi-name=Xiaomi_1526&client=iphone&uuid=5C7B6342814C7B496D836A69C872202B5DE8DB689A2D777DFC717E10FC0B4271&__skno=FEB757F5-6120-49EC-85B0-D1444A2C2E7B&utm_content=5C7B6342814C7B496D836A69C872202B5DE8DB689A2D777DFC717E10FC0B4271&utm_source=AppStore&utm_medium=iphone&version_name=6.6&wifi-cur=0&wifi-strength=&offset=0&utm_campaign=AgroupBgroupD100H0&__skck=3c0cf64e4b039997339ed8fec4cddf05&msid=0FA91DDF-BF5B-4DA2-B05D-FA2032F30C6C2016-04-04-08-38594',
      data:[],
    };
  }
  componentDidMount(){
    this.getDataFromNet();
  }
  getDataFromNet(){
    fetch(this.state.api_url)
    .then((response)=>response.json())
    .then((responseData)=>{
      console.log(responseData);
      /*
      this.setState({
        data:responseData.data,
      });
      */
    })
    .catch((error)=>{
      console.log(error);
      this.setState({
        data:youLikeData.data,
      });
    })

  }
  _splitLine=()=>{
    return(
      <View style={{height:0,borderTopWidth:StyleSheet.hairlineWidth,borderColor:"#aaa"}}></View>
    );
  }
  _keyExtractor = (item, index) => {
    return index;
  }
  _renderItem=({item})=>{
    return(
      <TouchableOpacity activeOpacity={0.5}>
        <View style={styles.listViewStyle}>
          <Image source={{uri:this.dealWithImgUrl(item.imageUrl)}} style={styles.imageStyle}/>
          <View style={styles.rightViewStyle}>
            <View style={styles.rightTopViewStyle}>
              <Text>{item.title}</Text>
              <Text>{item.topRightInfo}</Text>
            </View>
            <Text style={{color:'gray',flexWrap:'wrap'}}>{item.subTitle}</Text>
            <View style={styles.rightBottomViewStyle}>
              <Text style={{color:'red'}}>{item.subMessage}</Text>
              <Text>{item.bottomRightInfo}</Text>
            </View>
          </View>
          
        </View>
      </TouchableOpacity>
    );
  }
  dealWithImgUrl(url){
    if(url.search('w.h') == -1){
      return url;
    } else {
      return url.replace('w.h','120.90');
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <BottomCommonCell
          leftIcon="cnxh"
          leftTitle="猜你喜欢"
        />
        <FlatList
          contentContainerStyle={styles.flatListStyle}
          ref="listView"
          horizontal = {false}
          data={this.state.data}
          renderItem={this._renderItem}
          keyExtractor={this._keyExtractor}
          ItemSeparatorComponent={this._splitLine}
          scrollEnabled={false}
          showsHorizontalScrollIndicator={false}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  rightViewStyle:{
    marginLeft:8,
    width:width-160,
    justifyContent:'center',
  },
  rightTopViewStyle:{
    flexDirection:'row',
    marginBottom:8,
    justifyContent:'space-between',
  },
  rightBottomViewStyle:{
    flexDirection:'row',
    marginTop:8,
    justifyContent:'space-between',
  },
  container: {
    marginTop:15,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  imageStyle:{
    width:120,
    height:90,
  },
  listViewStyle:{
    backgroundColor:'white',
    padding:10,
    borderBottomColor:'#e8e8e8',
    borderBottomWidth:0.5,
    flexDirection:'row',
  }
});
